import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    DeviceEventEmitter,
    ScrollView,
    CameraRoll
} from 'react-native';

import Echarts from 'native-echarts'

import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import ToastUtils from '../Utils/ToastUtils'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'
import EncryptUtils from '../Utils/EncryptUtils'
import Constant from '../Constant/Constant'
import RouterUtils from '../Utils/RouterUtils'

export default class UserCaseChart extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: false,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: '我的案件',
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerRight: (
            <TouchableOpacity onPress={() =>
            {
                navigation.navigate('UserCaseSearch');
            }}>
                <Image resizeMode={Image.resizeMode.stretch} style={{width: 26, height: 26, marginRight: 16}} source={require('../img/search_head_time.png')}/>
            </TouchableOpacity>
        ),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {};
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('UserCaseChart', this.props.navigation.state.key);
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('UserCaseChart', this.props.navigation.state.key);
    }

    render()
    {
        const Option1 = {
            title: {
                text: '案件完成数',
                left: '10',
                top: '10',
                textStyle: {
                    fontSize: '14',
                    color: '#222222'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            //可以手动选择现实几个图标
            xAxis: [
                {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                }
            ],
            yAxis: [
                {
                    axisLabel: {
                        textStyle: {
                            color: ColorUtils.black, //y轴字体颜色
                        }
                    },
                    type: 'category',
                    data: ['问题上报', '快速上报', '现场核实', '现场核查', '案件处理']
                }
            ],
            //需要显示的图形名称，类型，以及数据设置
            series: [
                {
                    type: 'bar',
                    barWidth: 14,
                    itemStyle: {
                        normal: {
                            color: '#FFBE21',
                            label: {
                                show: true, //开启显示
                                position: 'right', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 14
                                }
                            }
                        }
                    },
                    data: [18, 21, 26, 14, 18]
                }

            ]
        };
        const Option2 = {
            title: {
                text: '正在进行数',
                left: '10',
                top: '10',
                textStyle: {
                    fontSize: '14',
                    color: '#222222'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            //可以手动选择现实几个图标
            xAxis: [
                {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                }
            ],
            yAxis: [
                {
                    axisLabel: {
                        textStyle: {
                            color: ColorUtils.black, //y轴字体颜色
                        }
                    },
                    type: 'category',
                    data: ['现场核实', '现场核查', '案件处理']
                }
            ],
            //需要显示的图形名称，类型，以及数据设置
            series: [
                {
                    type: 'bar',
                    barWidth: 14,
                    itemStyle: {
                        normal: {
                            color: '#19B1FF',
                            label: {
                                show: true, //开启显示
                                position: 'right', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 14
                                }
                            }
                        },
                    },
                    data: [18, 21, 18]
                }

            ]
        };
        const Option3 = {
            title: {
                text: '案件超时数',
                left: '10',
                top: '10',
                textStyle: {
                    fontSize: '14',
                    color: '#222222'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            //可以手动选择现实几个图标
            xAxis: [
                {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                }
            ],
            yAxis: [
                {
                    axisLabel: {
                        textStyle: {
                            color: ColorUtils.black, //y轴字体颜色
                        }
                    },
                    type: 'category',
                    data: ['现场核实', '现场核查', '案件处理']
                }
            ],
            //需要显示的图形名称，类型，以及数据设置
            series: [
                {
                    type: 'bar',
                    barWidth: 14,
                    itemStyle: {
                        normal: {
                            color: '#FF606B',
                            label: {
                                show: true, //开启显示
                                position: 'right', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 14
                                }
                            }
                        }
                    },
                    data: [18, 11, 16]
                }

            ]
        };
        return (
            <ScrollView style={styles.container}>
                <Echarts option={Option1} height={300} width={ScreenUtils.width}/>
                <Echarts option={Option2} height={200} width={ScreenUtils.width}/>
                <Echarts option={Option3} height={200} width={ScreenUtils.width}/>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.white,
    },
});


